<template>
  <div class="index-form form-contain">
    <div class="index-right">
       <div class="index-xxbanner">什么是信息流广告？</div>
      <div class="index-xxdetalis">
      信息流(Feeds)广告，是在社交媒体用户好友动态、或者资讯媒体和视听媒体内容流中的广告。
      </div>
      <div class="xxadvertising">
        您的广告可以展示在这里
      </div>
      <div class="xxfriends">
         <img src="static/images/图层 4@3x.png">
         <span>品牌广告</span>
            <span  :style ="note"><img src="static/images/组 43.png" ></span>
            <span  :style ="note"> <img src="static/images/组 45.png"></span>
             <span  :style ="note"><img src="static/images/组 44.png"></span>
             <span  :style ="note"><img src="static/images/组 46.png"></span>
      </div>
        <div class="xxfriendstwo">
         <img src="static/images/图层 4@3x.png">
         <span>图文/动图样式</span>
           <span :style ="note3"><img src="static/images/组 5.png" ></span>
         <span>与新闻浏览器样式打通图片支持GIF格式更吸引关注</span>
      </div>
     <div class="xxfriendsthree">
         <img src="static/images/图层 4@3x.png">
         <span>多图样式</span>
           <span :style ="note3"><img src="static/images/组 4.png" ></span>
       <span>更具冲击力的表达方式</span>
      </div>
      <div class="xxfriendsfor"  style="margin-top:3.9375rem;">
         <img src="static/images/图层 4@3x.png">
         <span>大图样式</span>
           <span :style ="note3"><img src="static/images/组 5.png" ></span>
            <span>更丰富的展现纬度</span>
      </div>
     <div class="xxfriendsone" style="margin-top:3.8rem;">
         <img src="static/images/图层 4@3x.png">
         <span>视频样式</span>
           <span :style ="note3"><img src="static/images/组 4.png" ></span>
            <span>更具冲击力的表达方式</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      imgList: [],
      note: {
            backgroundImage: "url(static/images/mobile-border3.png)",
            backgroundRepeat: "no-repeat",
          },
          note3: {
            backgroundImage: "url(static/images/pc-border.png)",
            backgroundRepeat: "no-repeat",
          },
    }
  },
  created () {
  },
  methods: {}
}
</script>

<style lang="less">
.index-form{
  .el-upload-list__item,
  .el-upload--picture-card{
    height: 100px;
    width: 24.53rem;
  }
  .el-upload--picture-card{
    line-height: 100px;
  }
  .index-left{
    float: left;
    width: 10%;
    p{
      color: #101010;
      text-align: right;
      line-height: 200px;
      span{
        color: rgb(229, 28, 35);
      }
    }
  }
   .index-xxbanner{
    width:8.5625rem;
height:.8125rem;
font-size:.875rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
letter-spacing:.0235rem;
text-align: center;
  }
  .index-xxdetalis{
    width:21rem;
height:2.125rem;
font-size:.75rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
  }
  .xxadvertising{
    width:8.875rem;
height:.6875rem;
font-size:.625rem;
font-weight:400;
text-align: center;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;

  }
  .xxfriends{
    width: 100%;
    height: auto;
    margin: 0 auto;
margin-top: .9375rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
      margin: 0 auto;
    }
    span:nth-child(2){
      display:block;
      width:4.3125rem;
height:.4375rem;
font-size:.73rem;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
    position: absolute;
    left: 44%;
    top: 10.9rem;
    }
    span:nth-child(3),span:nth-child(4),span:nth-child(5),span:nth-child(6){
             background-size: 3.125rem 6.5rem;
               width:3.125rem;
               height:6.5rem;
               display:inline-block;
margin-left:2.34rem;
margin-top: .9375rem;
     img{
      display: block;
     width: 2.8125rem;
      height:5.25rem;
      padding-top:.375rem
    }
     }
  }
  .xxfriendstwo{
    width: 45%;
    height: auto;
float: left;
position: relative;
left: 2.2rem;
top:.9375rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
    display: flex;
    justify-content:space-around;
    padding-left:1.425rem;
    }
    span:nth-child(2){
          display: block;
   width:5.8125rem;
height:.4375rem;
font-size:.73rem;
font-weight:300;
color:rgba(255,255,255,1);
    position: absolute;
    left: 20.9%;
    top: 0.2rem;
    }
     span:nth-child(3){
             background-size: 9.25rem 5.3125rem;
               width:9.25rem;
               height:5.3125rem;
               display: block;
margin-top: .9375rem;
     img{
      display: block;
     width:6rem;
      height:3.875rem;
      padding-top:.475rem;
      padding-left: 1.6rem;
    }
     }
      span:nth-child(4){
      width:9.4375rem;
height:.9375rem;
font-size:.375rem;
font-weight:400;
color:rgba(51,51,51,1);
line-height:1.125rem;
display: block;
position: relative;
top:.5625rem;
text-align: center;
    }
  }
.xxfriendsfor{
     width: 45%;
    height: auto;
float: left;
position: relative;
left: 2.2rem;
top:.9375rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
    display: flex;
    justify-content:space-around;
    padding-left:1.425rem;
    }
    span:nth-child(2){
          display: block;
   width:5.8125rem;
height:.4375rem;
font-size:.73rem;
font-weight:300;
color:rgba(255,255,255,1);
    position: absolute;
    left: 28.8%;
    top: 0.2rem;
    }
     span:nth-child(3){
             background-size: 9.25rem 5.3125rem;
               width:9.25rem;
               height:5.3125rem;
               display: block;
margin-top: .9375rem;
     img{
      display: block;
     width:6rem;
      height:3.875rem;
      padding-top:.475rem;
      padding-left: 1.6rem;
    }
     }
      span:nth-child(4){
        width: 9.1375rem;
height:.9375rem;
font-size:.375rem;
font-weight:400;
color:rgba(51,51,51,1);
line-height:1.125rem;
display: block;
position: relative;
top:.5625rem;
text-align: center;
    }
}
 .xxfriendsthree{
    width: 45%;
    height: auto;
float: right;
position: relative;
top:.9375rem;
left: -.2rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
       padding-left:1.425rem;
    }
    span:nth-child(2){
          display: block;
   width:5.8125rem;
height:.4375rem;
font-size:.73rem;
font-weight:300;
color:rgba(255,255,255,1);
    position: absolute;
    left: 28.8%;
    top: 0.2rem;
    }
     span:nth-child(3){
             background-size: 9.25rem 5.3125rem;
               width:9.25rem;
               height:5.3125rem;
               display: block;
margin-top: .9375rem;
     img{
      display: block;
     width:6rem;
      height:3.875rem;
      padding-top:.475rem;
      padding-left: 1.6rem;
    }
     }
   span:nth-child(4){
    height: .375rem;
    font-size: .375rem;
    font-weight: 400;
    color: #333333;
    display: inline-block;
   margin: 0 auto;
   display: block;
    margin-top:.7625rem;
    text-align: center;
       margin-right: 2rem;
   }
  }
   .xxfriendsone{
    width: 45%;
    height: auto;
float: right;
position: relative;
top:.9375rem;
left: -.2rem;
    img:nth-child(1){
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
       padding-left:1.425rem;
    }
    span:nth-child(2){
          display: block;
   width:5.8125rem;
height:.4375rem;
font-size:.73rem;
font-weight:300;
color:rgba(255,255,255,1);
    position: absolute;
    left: 28.8%;
    top: 0.2rem;
    }
     span:nth-child(3){
             background-size: 9.25rem 5.3125rem;
               width:9.25rem;
               height:5.3125rem;
               display: block;
margin-top: .9375rem;
     img{
      display: block;
     width:6rem;
      height:3.875rem;
      padding-top:.475rem;
      padding-left: 1.6rem;
    }
     }
   span:nth-child(4){
    height: .375rem;
    font-size: .375rem;
    font-weight: 400;
    color: #333333;
    display: inline-block;
   margin: 0 auto;
   display: block;
    margin-top:.5625rem;
    text-align: center;
        margin-right: 2rem;
   }
  }
   
  }

</style>
